<template>
    <div>
        <Header></Header>
        <ul class="shoplist">
            <li v-for="item in shoplist" :key="item.id" @click="gotoDetail(item.id)">
                <img :src="item.pic" alt />
                <p>{{item.name}}</p>
                <span class="price">{{'￥'+item.originalPrice}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import Header from "@/components/Header/Header";
export default {
    components: {
        Header,
    },
    data() {
        return {
            shoplist: [],
        };
    },
    methods: {
        gotoDetail(id) {
            this.$router.push({
                path: this.$path.goodShopDetail,
                query: { id: id },
            });
        },
    },
    mounted() {
        this.$API.getGoodShop().then((res) => {
            console.log(res.data.data);
            this.shoplist = res.data.data;
        });
    },
};
</script>

<style lang="scss">
.shoplist {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
        width: 44%;
        height: 40vh;
        text-align: center;
        img {
            width: 100%;
            height: 70%;
        }
        span {
            color: red;
            margin: 1vh 0;
        }
    }
}
</style>